<template>
	<view class="search">
		<view class="searh-top">
			<!-- 搜索框 -->
			<u-search placeholder="520元礼包抢先领" v-model="keyword" shape="square" actionText="取消" @custom="back()" @change="searchHelper" @search="searchGoods"></u-search>
		</view>
		
		<view v-if="contentShow==1" class="history_area">
			<view class="search-history">
			<!-- <view class="search-history-text"> -->
				<h3>历史记录</h3>
			<!-- </view> -->
				<view class="search-history-icon" @tap="clearHistory">
					<u-icon name="trash" size="20"></u-icon>
				</view>
			</view>
			<!-- 历史记录搜索 -->
			<view class="historyList">
				<view  @tap="searchGoods(item)" class="historyList-item" v-for="(item,index) in historyKeywordList" :key="index">{{item}}</view>
			</view>
			<view class="hot-search">
				<h3>热门搜索</h3>
				<view class="historyList">
					<view  @tap="searchGoods(item.keyword)" class="historyList-item" v-for="item in hotKeywordList" :key="item.id" :style="item.is_hot==1?'color:red;border:1rpx solid red':''">{{item.keyword}}</view>
				</view>
			</view>
		</view>
		
		<!-- 实时搜索内容 -->
		<view v-else-if="contentShow==2" class="keyword_list_area">
			<view class="searchHelper">
				<view @tap="searchGoods(item)" class="searchHelper-item" v-for="(item,index) in searchList" :key="index">{{item}}</view>
			</view>
			<view class="searchHelper-noMore">没有更多了</view>
		</view>
		<view v-else class="goods_list_area">
			<fy-dropdown :menuList="menuList" active-color="red">
				<fy-dropdown-item></fy-dropdown-item>
				<fy-dropdown-item v-model="priceValue" dropdownKey="price" :options="priceOptions" @change="handlerTypeChange"></fy-dropdown-item>
				<fy-dropdown-item v-model="categoryValue" dropdownKey="category" :options="categoryOptions" @change="handlerTypeChange"></fy-dropdown-item>
			</fy-dropdown>
			<view v-if="goodsList.length>0">
				<cd-goods-list :goodsList="goodsList"></cd-goods-list>
			</view>
			<view v-else>
				<u-empty
					mode="list"
					text="暂无商品"
					icon="http://cdn.uviewui.com/uview/empty/car.png"
				>
				</u-empty>
			</view>
		</view>
		
	</view>
</template>

<script>
	import cdGoodsList from "@/components/cd-goods-list/cd-goods-list.vue"
	import {ApiSearch,ApiClearHistory,ApiSearchHelper,ApiSearchGoods} from '../../utils/api.js'
	export default{
		components:{
			"cd-goods-list":cdGoodsList
		},
		data(){
			return{
				menuList: [{ title: '综合', dropdownKey: 'synthesis' }, { title: '价格', dropdownKey: 'price' }, { title: '分类', dropdownKey: 'category' }],
				synthesisValue: '',
				columnOptions: [],
				priceValue: '',
				priceOptions: [{ label: '价格由高到低', value: 1 }, { label: '价格由低到高', value: 2 }],
				categoryValue: '',
				categoryOptions: [{ label: '全部', value: 3 }, { label: '居家', value: 4 }],
				
				
				// 关键字
				keyword:'',
				// 历史记录数组
				historyKeywordList:[],
				// 热门搜索数组
				hotKeywordList:{},
				// 实时搜索数组
				searchList:[],
				// 显示对应内容
				contentShow:1,
				// 通过关键字找到商品的数组
				goodsList:[],
			}
		},
		methods:{
			// 下拉菜单事件
			 handlerTypeChange(e) {
			    // console.log(e);//1 2
				// 价格排序
				this.goodsList.sort((a,b)=>{
					return e==1?(b.retail_price-a.retail_price):(a.retail_price-b.retail_price)
				});
				
			},
					
			back(){
				uni.reLaunch({
					url:'/pages/index/index'
				})
			},
			// 搜索窗口数据
			async getSearch(){
				let res = await ApiSearch();
				// console.log(res);
				let {historyKeywordList,hotKeywordList} = res.data;
				this.historyKeywordList = historyKeywordList;
				this.hotKeywordList=hotKeywordList;
				// this.keyword=res.data.defaultKeyword.keyword;
				// console.log(historyKeywordList,hotKeywordList);
			},
			// 清除历史记录
			async clearHistory(){
				let ret =await ApiClearHistory();
				// console.log(ret);
				// 默认删除成功后都会保留三个标签
				if(ret.errno==0){
					uni.showToast({
						title:"删除成功",
						type:'success'
					})
				}
			},
			// 实时搜索功能
			async searchHelper(){
				let res = await ApiSearchHelper({
					keyword:this.keyword
				})
				this.searchList = res.data;
				// console.log(res);
				// console.log(this.searchList);
				// 显示对应内容
				this.contentShow = 2;
			},
			// 商品框搜索搜查
			async searchGoods(keyword){
				this.keyword = keyword;
				let res = await ApiSearchGoods({
					keyword:this.keyword
				});
				if(res.errno!==0){
					this.goodsList=[];
					return
				}
				// console.log(res);
				let {goodsList} = res.data;
				this.goodsList = goodsList;
				console.log(this.goodsList);
				this.contentShow=3;
				
			}
		},
		onShow(){
			this.getSearch();
		}
	}
</script>

<style lang="scss">
	.search{
		height: 100vh;
		background-color: rgb(239, 239, 239);
	}
	.searh-top{
		background-color: white;
		padding: 20rpx 0rpx 20rpx 20rpx;
		.u-search{	
			background-color: #f7f8fa;
		}	
	}
	.history_area{
		.search-history{
			background-color: white;
			// margin:0rpx 20rpx 0rpx 20rpx;
			padding: 20rpx 20rpx 0rpx 20rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			h3{
				font-size:36rpx;
				font-family: "黑体";
				color:#333333;
				vertical-align: baseline;
			}
		}
		// 记录
		.historyList{
			background-color: white;
			display: flex;
			flex-wrap: wrap;
			padding-top: 20rpx;
			// margin-top: 20rpx;
			.historyList-item{
				margin-left:20rpx;
				margin-bottom: 20rpx;
				padding: 0rpx 8rpx;
				border: 1rpx solid lightgray;
				color: #969799;
				font-size: 24rpx;
				font-family: "宋体";
			}
		}
		.hot-search{
			background-color: white;
			margin-top: 40rpx;
			padding-top: 20rpx;
			padding-bottom:20rpx;
			h3{
				font-size: 36rpx;
				margin-left: 20rpx;
				font-family: "黑体";
				vertical-align: baseline;
			}
		}
	}
	
	// 实时搜索的内容
	.keyword_list_area{
		.searchHelper{
			background-color: white;
			.searchHelper-item{
				padding: 20rpx 32rpx;
				font-size: 28rpx;
				font-family: "黑体";
				color: #323233;
				border-bottom: 1rpx solid rgb(245, 246, 248);
			}
		}
		//没有更多了
		.searchHelper-noMore{
			display: flex;
			justify-content: center;
			font-size: 28rpx;
			color: rgb(150, 151, 153);
			line-height: 100rpx;
		}
	}
	
	// 商品展示
	.goods_list_area{
		
	}
	

</style>